<template>
    <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
			<button class="mui-btn mui-btn-numbox-minus" @click="reduce" type="button">-</button>
			<input ref='test' id="test" class="mui-input-numbox"
                 type="number" :value="myval" @change="changed"/>
			<button class="mui-btn mui-btn-numbox-plus" @click="add" type="button">+</button>
	</div>			
</template>
<script>


export default {
    data(){
        return{
            myval:1
        }
    },
   methods:{
       add(){
        this.myval= this.$refs.test.value++
        //    document.getElementById("test").value++
        this.$store.commit('addcount',2)
       },
       reduce(){
            this.myval=this.$refs.test.value--
            // document.getElementById("test").value--
       },
       changed(){
            
           console.log(this.$refs.test.value)
       }
   },
//   computed:{},
  watch:{
      myval:function(val1,newval){
           console.log(val1)
           this.$emit('getCount',val1)
      }
  }
}
</script>
